<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/large.css">
		<!-- 当浏览器窗口<=1200px的时候, middle.css有效 -->
		<link rel="stylesheet" href="css/middle.css" media="screen and (max-width: 1200px)">
		<link rel="stylesheet" href="css/small.css" media="screen and (max-width: 640px)">
		<link rel="stylesheet" href="css/smaller.css" media="screen and (max-width:480px)">
		<title>映纷视觉</title>
	</head>
	<body>
		
		<!-- 上部 -->
		<div class="nav">
			<div class="top">
				<img src="img/title2.png" alt="">
			</div>
			<div class="bottom">
				<a href="#">HOME</a>
				<a href="#work">WORK</a>
				<a href="">CONTACT</a>
				<a href="">JOIN US</a>
			</div>
		</div>

		<!-- 中间内容 -->
		<div class="content">
			<div class="lb">
				<div>
					<img src="img/left.png" alt="">
					<img src="img/right.png" alt="">
				</div>
				<img src="img/58bf8b14867c3.jpg" alt="">
				<p>动画短片《旅行者大意了》</p>
			</div>

			<div class="pageC">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>

			<p>
					Infini Studio （映纷创意）是一家以动画和设计为驱动的独立创意机构。我们运用设计、绘画、动画、特效及更多元化的创新探索，为品牌提供丰富多元的跨媒体广告创意。
			</p>
			<div class="images" id="work">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/4.jpg" alt="">
				<img src="img/5.jpg" alt="">
				<img src="img/6.jpg" alt="">
				<img src="img/7.jpg" alt="">
				<img src="img/8.jpg" alt="">
				<img src="img/9.jpg" alt="">
				<img src="img/10.jpg" alt="">
				<img src="img/11.jpg" alt="">
				<img src="img/12.jpg" alt="">
				<img src="img/13.jpg" alt="">
				<img src="img/14.jpg" alt="">
			</div>

			<ul class="waterflow">
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
				<li>
					<img src="img/5ab1e3557f775.jpg" alt="">
					<p>OPPO R15</p>
					<div>
						<h3>OPPO</h3>
						<p>OPPO R15</p>
					</div>
				</li>
			</ul>
		</div>

		<!-- 底部 -->
		<div class="footer"></div>


		
	</body>
</html>